<template>
  <!-- 容器 -->
  <div :style="{ width: '100%', height: '100%' }"  ref="charts"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name:'',
  props:["willExamTotal","doingExamTotal","leaveExamTotal"],
  data() {
    return {
      pieData:[
        {name:'未开始',value:0},
        {name:'考试中',value:0},
        {name:'已结束',value:0},
      ],
      option:{
        color:['navajowhite', 'hotpink', 'aquamarine'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        //系列
        series:[
          {
            type: 'pie',
            radius: '60%',
            data:this.pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
      },
    }
  },
  mounted(){
    //初始化echarts实例
    let pieCharts = echarts.init(this.$refs.charts);
    this.pieData[0].value = this.willExamTotal;
    this.pieData[1].value = this.doingExamTotal;
    this.pieData[2].value = this.leaveExamTotal;
    // 配置数据
    pieCharts.setOption(this.option);
  },
  methods:{
    refreshData(){
      this.pieData[0].value = this.willExamTotal;
      this.pieData[1].value = this.doingExamTotal;
      this.pieData[2].value = this.leaveExamTotal;
      let pieCharts = echarts.init(this.$refs.charts);
      // 配置数据
      this.option.series[0].data = this.pieData;
      pieCharts.setOption(this.option);
    }
  },
  watch:{
    willExamTotal:{
      handler(){
        this.refreshData();
      }
    },
    doingExamTotal:{
      handler(){
        this.refreshData();
      }
    },
    leaveExamTotal:{
      handler(){
        this.refreshData();
      }
    }
  }
}
</script>

<style scope>

</style>